<template>
    <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="标题" required>
            <el-input v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item label="摘要">
            <el-input type="textarea" v-model="form.summary"></el-input>
        </el-form-item>

        <el-form-item label="类型" required>
            <el-radio-group v-model="form.type">
                <el-radio :label="1">普通</el-radio>
                <el-radio :label="2">链接</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="标题图片" required>
            <el-upload
                action="#"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
            >
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>

        <el-form-item label="是否发布到门户" required>
            <el-radio-group v-model="form.publishToPortal">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="重要等级" required>
            <el-rate v-model="form.priority"></el-rate>
        </el-form-item>

        <el-form-item label="有效期" required>
            <el-date-picker v-model="form.validity" type="date" placeholder="请选择日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="是否置顶" required>
            <el-radio-group v-model="form.isTop">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="关键词" required>
            <el-input v-model="form.keywords"></el-input>
        </el-form-item>

        <el-form-item label="正文内容" required>
            <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>

        <el-form-item label="上传附件">
            <el-upload
                action="#"
                :multiple="true"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :limit="5"
                accept=".doc,.docx,.xls,.xlsx,.pdf"
                :file-list="fileList"
            >
                <el-button type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
            <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            form: {
                title: '',
                summary: '',
                type: 1,
                publishToPortal: true,
                priority: 3,
                validity: '',
                isTop: true,
                keywords: '',
                content: '',
            },
            fileList: [],
        };
    },
    methods: {
        handlePictureCardPreview(file) {
            console.log(file);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handleSubmit() {
            console.log('提交表单', this.form);
        },
        handleCancel() {
            this.$refs.form.resetFields();
        },
    },
};
</script>

<style scoped>
.box {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
